<template>
	<view class="login">
		<view class="form">
			<view class="login-top">
				<view class="loginText">
					<view class="image-box">
						<image style="width: 108upx;height: 108upx;" src="@/static/index/l.png" alt />
					</view>
					<h2>浙江高信标准版</h2>
				</view>
			</view>
			<view class="login-mid">
				<view class="loginInfo">
					<view class="login-phone">
						<image class="img" style="width: 35upx;height: 35upx;" src="@/static/index/people.png"
							alt />
						<input type="text" placeholder="请输入账号" v-model="username" />
					</view>
					<view class="login-pswd">
						<image class="img" style="width: 35upx;height: 35upx;" src="@/static/index/phone.png" alt />

						<input type="password" class="inputPassword" placeholder="请输入密码" v-model="password" />
					</view>
					<view class="login-forget" @tap="forgetPs">忘记密码？</view>
				</view>
			</view>
			<view class="login-bot">
				<view class="login-new">
					<image class="imgs img" src="../../static/index/inter.png" alt @tap="loginFun" />
				</view>
			</view>
			<loading :shadeShow="shadeShow" :shadeClick="false" :backgroundColor="backgroundColor" :width="width"
				:height="height" ref="loadings" :custom="false" :type="1" @callback="callback">

			</loading>
			<view class="bottom">
				<view class="text">技术支持: 浙江高信技术股份有限公司</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loading from '@/components/xuan-loading/xuan-loadings.vue'
	
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			loading
		},
		data() {
			return {
				width: '150rpx',
				height: '100rpx',
				shadeShow: true,
				backgroundColor: "transparent",
				themeColor: '#525EF9',
				logoUrl: '../../static/l.png',
				// 测试账号
				// username: "zlyjcssgdw", //施工单位
				// username: "zlyjcszjb", //总监办
				// username: "zlyjcsjsdw", //建设单位
				// username: "zyljcszxsydw",//管理员
				// password: "Yjxa@369",
				// 测试账号
				username: "",
				password: "",
				dataNum: 5, //2022/08/29未用
				pathUrl: "http://1.14.19.236:8001/fileAnnexes/inspection.apk",
				loadNum: 0,
				passWordType: "password",
				flag: 1,
				loading: "",
			}
		},
		onLoad() {
			let that = this;
			// this.getData()
		},

		methods: {
			forgetPs() {
				// uni.showModal({
				// 	title:"温馨提示",
				// 	content:"暂未开放"
				// })
				uni.showToast({
					title: "温馨提示:暂未开放",
					icon: 'none'
				})
			},
			getData() {
				var that = this
				this.$http.getVersion('').then(res => {
					if (res.errcode == 0) {
						that.loadNum = res.data;
						if (that.dataNum < res.data) {
							// that.pathUrl = ""
							uni.showModal({
								title: '提示',
								content: '系统检测到新版本，是否更新?',
								success: function(res) {
									if (res.confirm) {
										plus.runtime.openURL(that.pathUrl)
									} else if (res.cancel) {
										uni.showToast({
											title: "请立即更新",
											icon: 'none',
											duration: 2000
										});
									}
								}
							});
						}
					}
				}, (err) => {
					uni.showToast({
						title: "更新失败",
						icon: 'none',
						duration: 2000
					});
				})
			},
			loginFun(e) {
				uni.clearStorage();
				var that = this
				if (this.username.trim() == "" || this.password.trim() == "") {
					uni.showToast({
						title: '账户或密码不正确',
						icon: 'none',
						duration: 2000
					});
				} else {
					if (that.dataNum < this.loadNum) {
						// that.pathUrl = "http://1.14.19.236:8001/fileAnnexes/fsSample.apk"
						uni.showModal({
							title: '提示',
							content: '系统检测到新版本，是否更新?',
							success: function(res) {
								if (res.confirm) {
									plus.runtime.openURL(that.pathUrl)
								} else if (res.cancel) {
									uni.showToast({
										title: "请立即更新",
										icon: 'none',
										duration: 2000
									});
								}
							}
						});
					} else {
						this.$refs.loadings.open();
						var datas = {
							username: this.username,
							password: this.password.toLowerCase() //密码加密,
						}
						this.$http.getLogin(datas).then(res => {
							if (res.errcode == 0) {
								setTimeout(() => {
									this.$refs.loadings.close();
									uni.switchTab({
										url: '/pages/home/index',
									});
									uni.setStorage({
										key: 'userInfo',
										data: JSON.stringify(res.data.userInfo)
									});
									uni.setStorage({
										key: 'role',
										data: JSON.stringify(res.data.rolemap)
									});
									
									uni.showToast({
										title: "登录成功",
										icon: 'none',
										duration: 2000
									});

								}, 3000);
							}
							if (res.errcode != 0) {
								setTimeout(() => {
									uni.showToast({
										title: res.data.loginMsg,
										icon: 'none',
										duration: 2000
									});
									this.username = ""
									this.password = ""
									this.$refs.loadings.close();

								}, 2000)
							}
						}, (err) => {
							// console.log('失败1' + err)
							uni.showToast({
								title: "登录失败",
								icon: 'none',
								duration: 2000
							});
						})
					}
				}
			},
			callback() {
				console.log("关闭后回掉");
			}
		}
	}
</script>

<style scoped>
	.login {
		width: 100%;
		height: 100%;
	}

	.image-box {}

	.login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background-image: url(../../static/index/board.png);
		background-size: 100% 100%;
		text-align: center;
		color: rgb(204, 204, 204);
		overflow: hidden;
	}

	.form {
		height: 100%;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.login-top {
		flex: 2;
		position: relative;
	}

	.login-top .loginText {
		position: absolute;
		width: 99%;
		transform: translate(-50%, -50%);
		top: 77%;
		left: 50%;
	}

	.img-box {
		position: relative;
		width: 5rem;
		height: 5rem;
		margin: auto;

		border-radius: 50%;
	}

	.img-box img {
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
	}

	.login-top h2 {
		margin-top: 50upx;
		color: #171A1D;
		font-weight: 600;
		font-size: 40upx;
		letter-spacing: 4upx;
	}

	.login-mid {
		flex: 3;

		position: relative;
	}

	.login-mid .loginInfo {
		position: absolute;

		width: 100%;
		transform: translate(-50%, -50%);
		top: 48%;
		left: 50%;
	}

	.login-phone,
	.login-pswd {
		width: 80%;
		font-size: 30upx;
		background-color: #F6F9FE;
		border-radius: 58upx;
		margin: 1.5rem auto;
		box-sizing: border-box;

		padding: 1.06rem 1.2rem;
		position: relative;
		display: flex;
	}

	.login-pswd {
		margin-bottom: 24upx;
	}

	.login-phone input,
	.login-pswd input {
		font-size: 30upx;
	}

	.login-phone img {
		display: inline-block;
		vertical-align: middle;
		width: 30upx;
		height: 32upx;
	}

	.login-pswd img {
		display: inline-block;
		vertical-align: middle;
		width: 30upx;
		height: 32upx;
	}

	.login-phone input,
	.login-pswd input {
		border: none;
		outline: medium;
		background: transparent;
		color: #171A1D;
		margin-left: 40upx !important;
		font-size: 30upx;
		text-align: left;
	}

	.login-pswd .eyes {
		position: absolute;
		top: 1.1rem;
		right: 1.2rem;
	}

	/* 修改 input 框里面自带的字的字体颜色 */
	input::-webkit-input-placeholder {
		color: #9C9FA4;
	}

	.login-forget {
		width: 80%;
		/* font-size: 0.8rem; */
		font-size: 26rpx;
		/* position: absolute; */
		/* 	right: 0rem; */
		color: #9C9FA4 !important;
		margin: auto;
		text-align: right;
		padding: 0 10rpx;
	}

	.login-or {
		font-size: 0.9rem;
	}

	.login-or:after {
		content: "—————";
	}

	.login-or:before {
		content: "—————";
	}

	.dynamic-code,
	.bottom {
		font-size: 0.9rem;
	}

	.login-bot {
		flex: 1;
		width: 100%;
		position: relative;
	}

	.login-new {
		width: 100%;

		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;

		cursor: pointer;
		position: relative;
	}

	.login-new .img {
		width: 80%;
		height: 110upx;
		position: relative;


	}

	.imgs::after {
		position: absolute;
		content: "";
		width: 67upx;
		height: 32upx;
		display: block;
		top: 50%;
		left: 50%;
		background: url("@/static/index/arrow.png") no-repeat;
		background-size: 100% 100%;
		transform: translate(-50%, -50%);
		z-index: 0;
	}



	.bottom {

		flex: 1;
		position: relative;
	}

	.bottom .text {
		position: absolute;
		width: 98%;
		font-size: 28upx;
		transform: translate(-50%, -50%);
		top: 65%;
		left: 50%;
		color: #9C9FA4;
	}

	.inputPassword {
		background: none;
		outline: none;
		border: none;
		border: none;
		outline: medium;
		background: transparent;
		margin-left: 40upx !important;
		font-size: 30upx;
	}

	.test {
		animation: 1s aaa infinite;
	}

	@keyframes aaa {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.content {}
</style>
